<template>
<aside class="left-sidebar" data-sidebarbg="skin5">
  <div id="scroll-sidebar" class="scroll-sidebar">
    <nav class="sidebar-nav">
      <ul id="sidebarnav" class="p-t-30">
        <li class="sidebar-item" v-for="(menu, index) in menus" :index="index" :key="menu.permitId" :class="{'selected': menu.isActive}">
          <a class="sidebar-link waves-effect waves-dark" aria-expanded="false"
            :class="[{'has-arrow': menu.items.length > 0},{'active': menu.isActive}]" :href="menu.items.length > 0 ? 'javascript:void(0)': menu.path ">
            <i :class="menu.icon"></i> <span class="hide-menu">{{menu.name}}</span>
          </a>
          <ul aria-expanded="false" class="collapse first-level" v-if="menu.items.length > 0" :class="{'in': menu.isActive}">
            <li class="sidebar-item" v-for="item in menu.items" :key="item.permitId" :class="{'active': item.isActive}">
              <a class="sidebar-link" :href="item.path">
                <i :class="item.icon"></i> <span class="hide-menu">{{item.name}}</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</aside>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'

  import PerfectScrollbar from 'perfect-scrollbar'
  import 'perfect-scrollbar/css/perfect-scrollbar.css'
  import '../dist/js/waves.js'

  const menus = []
  /* 
  const menus = [
		{	
			permitId:0-1,
			path: '#/charts.html',
			icon: 'mdi mdi-chart-bar',
			name: 'Charts',
			items: []
		}
  ]
   */
  $(document).on('click', '#sidebarnav a', e => {
    let $this = $(e.currentTarget)
    if ($this.hasClass('active')) {
      $this.next('ul').removeClass('in')
      $this.removeClass('active')
    } else if ($this.next('ul').length > 0) {
      $('.in').prev('a').removeClass('active')
      $('.in').removeClass('in')
      $this.next('ul').addClass('in')
      $this.addClass('active')
    }
    setActive($this.attr('href'))
  })
  $(document).on('click', '#sidebarnav >li >a.has-arrow', e => {
    e.preventDefault()
  })
  function setActive(url) {
    if (url && url.indexOf('javascript') != -1) {
      return
    }
    for (let menu of menus) {
      menu.isActive = menu.path && url.indexOf(menu.path) != -1
      for (let item of menu.items) {
        if (item.path && url.indexOf(item.path) != -1) {
          menu.isActive = true
          item.isActive = true
        } else {
          item.isActive = false
        } } }
  }
  function loadMenus() {
    $.get(cfg.serverPath + '/login/menus', result => {
      if (result.status != 0) {
        $(document).failMsg(result.message)
        return
      }
      this.sortMenus(result.data)
      this.setActive(window.location.href)
    })
  }
  function sortMenus(menus) {
    for (let i in menus) {
      if (!menus[i].items) {
        menus[i].isActive = false
        menus[i].items = []
      }
      for (let j in menus) {
        if (menus[j].parentId && menus[i].permitId == menus[j].parentId) {
          menus[i].items.push(menus[j])
        }
      }
      if (!menus[i].parentId) {
        this.menus.unshift(menus[i])
      }
    }
    this.menus.sort((a, b) => {
      return a.sort - b.sort
    })
  }
  export default {
    data() {
      return {
        menus
      }
    },
    methods: {
      loadMenus,
      sortMenus,
      setActive
    },
    created() {
      this.menus.splice(0, this.menus.length)
      this.loadMenus()
    },
    mounted() {
      new PerfectScrollbar('#scroll-sidebar');
    }
  }
</script>
<style scoped>
.sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link {
	padding: 10px 30px;
}
</style>